好的今天來寫其他區塊，我想在box3添加長期任務追蹤的功能，目前設定需要達到的目標有
可在主要任務中設定子任務
依據子任務完成數量來改變主要任務的進度條
可達到持久化資料，網頁從載任務不會消失
身為凡人的我沒辦法一次達到所有目標，所以今天就先寫一些功能就好

為了方便管理，且不要讓App.vue的程式碼多到沒盡頭，將”長期任務追蹤”建成一個獨立元件
我們先在src中建立一個資料夾components，用來儲存其他元件。

在components裡建立ProjectTracker.vue

完成後到ProjectTracker.vue寫主要功能

先來寫專案建立且能包含子任務的功能
一樣先在<script setup>定義變數及方法

const projects = ref([])
const newProject = ref('')

function addProject(title) {
  if (title.trim() !== '') {
    projects.value.push({
      title,
      subtasks: [], // 子任務
 newSubtask: '' // 每個專案有自己的子任務輸入框

    })
  }
}

const projects = ref([])先定義一個響應式變數project為空陣列，來儲存大型專案
const newProject = ref('')用來儲存新建的專案
定義一個函式addProject，接受參數title，就是專案名稱

if (title.trim() !== '')先確認名稱不是空字串或空白字元，才不會建立一個空白專案，.trim()會刪除字串前後的空白

projects.value.push({ title, subtasks: [], // 子任務 })
在project中建立新的陣列，表示執行建立專案的動作，這個新陣列會包含title(標題)和
subtasks:[](子任務清單，初始值為空陣列)，以及newSubtask:(每個專案自己的子任務輸入框)

接著寫子任務的建立功能

function addSubtask(projectIndex, text) {
  if (text.trim() !== '') {
    projects.value[projectIndex].subtasks.push({
      text,
      done: false
    })
  }
}

定義一個函式來建立專案的子任務
接收兩個參數，projectIndex(對應的專案索引值)，text(子任務標題)
一樣先用if判斷不會建立空白任務名稱
projects.value[projectIndex].subtasks.push({ text, done: false})
透過[projectIndex]找到指定專案，並在subtasks陣列中新增子任務，
text為子任務名稱，done為判斷任務是否完成，done預設為false，表示未完成

function toggleSubtask(projectIndex, subtaskIndex) {
  let subtask = projects.value[projectIndex].subtasks[subtaskIndex]
  subtask.done = !subtask.done
}

定義一個函式toggleSubtask，參數為projectIndex(專案索引值)和subtaskIndex(子任務索引值)
let subtask = projects.value[projectIndex].subtasks[subtaskIndex]
先找到指定專案，再找到指定的子任務，將他存到變數subtask裡
subtask.done = !subtask.done 切換子任務的狀態

到<template>區劃分塊設計排版

<template>
  <div class="project-tracker">
    <h2>📊 專案進度追蹤</h2>


    <!-- 新增專案 -->
    <div class="input-box">
      <input
        v-model="newProject"
        placeholder="輸入專案名稱..."
        @keyup.enter="addProject(newProject); newProject=''"
      />
      <button @click="addProject(newProject); newProject=''">新增專案</button>
    </div>

    <!-- 專案清單 -->
    <div v-for="(project, pIndex) in projects" :key="pIndex" class="project-box">
      <h3>{{ project.title }}</h3>

      <!-- 新增子任務 -->
      <div class="input-box">
        <input
          v-model="project.newSubtask"
          placeholder="輸入子任務..."
          @keyup.enter="addSubtask(pIndex, project.newSubtask); project.newSubtask=''"
        />
        <button @click="addSubtask(pIndex, project.newSubtask); project.newSubtask=''">新增子任務</button>
      </div>

      <!-- 子任務清單 -->
      <ul class="task-list">
        <li
          v-for="(subtask, sIndex) in project.subtasks"
          :key="sIndex"
          :class="{ done: subtask.done }"
        >
          <span @click="toggleSubtask(pIndex, sIndex)">  
            <input
              type="checkbox"
              v-model="subtask.done"
          />{{ subtask.text }}</span>

        </li>
      </ul>
    </div>
  </div>
</template>

到<style scoped>簡單設計一下樣式

<style scoped>
.project-tracker {
  padding: 16px;
  color: white;
}


.input-box {
  width: 100%;
  display: flex;
  margin: 10px 0;
}

.input-box input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.input-box button {
  margin-left: 6px;
  padding: 8px 14px;
  border: none;
  background: #07544e;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}
.input-box button:hover {
  background: #0a6f62;
}

/* 專案區塊 */
.project-box {
  background: #fff;
  color: #333;
  padding: 12px;
  margin: 12px 0;
  border-radius: 8px;
  text-align: left;
}

/* 子任務清單 */
.task-list {
  list-style: none;
  padding: 0;
}
.task-list li {
  display: flex;
  align-items: center;
  margin: 6px 0;
}
.task-list li.done span {
  text-decoration: line-through;
  color: gray;
}
</style>

寫好ProjectTracker.vue的內容後，不要忘了導入到App.vue中喔!!

到App.vue並在<script setup>區輸入
import ProjectTracker from "./components/ProjectTracker.vue"

然後到box3的區域加入<ProjectTracker/>

      <div class="box3">
      <ProjectTracker/>
      </div>

好的到這裡應該能看到畫面右邊區塊有建立專案及子任務的功能
明天繼續完成進度條的功能及樣式設定
各位明天見~